<template>
  <div class="cinema">
    <myhead title="影院" ></myhead>
    <div class="cinnav">
        <div class="nav-item">
          <van-popover v-model="showPopover" placement="bottom-start"  trigger="click">
              <van-grid
                square
                clickable
                :border="false"
                column-num="4"
                :style="{width:'6rem'}"
              >
                <van-grid-item
                  v-for="(l,i) in areas"
                  :key="i"
                  :text="l.name"
                  @click="change(l,i)"
                  :class="current==i?'active':''"
                />
              </van-grid>
              <template #reference>
                <span>
                    {{name}}
                  </span>
                  <van-icon name="arrow-down" />
              </template>
            </van-popover>
        </div>
        <div class="nav-item">
            <van-dropdown-menu>
              <van-dropdown-item v-model="value1" :options="option1"  @change="startChange"/>
              <!-- <van-dropdown-item v-model="value2" :options="option2" /> -->
            </van-dropdown-menu>
        </div>
    </div>
    <clist :cinemas="cinemas"  ></clist>
  </div>
</template>

<script>
export default {
  data(){
    return {
      cinemas:[],
      areas:[],
      showPopover:false,
      current:0,
      name:"全城",
      value1:0,
      option1: [
        { text: '默认排序', value: 0 },
        { text: '价格升序', value: 1 },
        { text: '价格降序', value: 2 },
      ],
    }
  },
  methods:{
    startChange(value){
      console.log(value)
      if(value==0){
          this.cinemas = [...this.cinemaList];
      }else if(value==1){
          this.cinemas = this.cinemas.sort(this.arrayAsc)
      }else{
          this.cinemas = this.cinemas.sort(this.arrayDesc)         
      }
    },
    arrayAsc(a,b){
      return a['lowPrice'] - b['lowPrice']
    },
    arrayDesc(a,b){
      return b['lowPrice'] - a['lowPrice']
    },
    change(item,index){
      this.showPopover =  false;
      this.current = index;
      this.name = item.name;
      if(item.districtId=="-1"){
        // 全城
        this.cinemas = [...this.cinemaList];
      }else{
        this.cinemas = this.cinemaList.filter(val=>val.district.districtId == item.districtId);
      }
    }
  },
  mounted(){
    // 获取所有的电影院 
    if(this.city){
      this.$ajax.getMaiZuo({
        cityId: this.city.cityId,
      },{
        'X-Host': 'mall.film-ticket.cinema.list',
      })
      .then(res=>{
        console.log(res)
        this.changeCinemaList(res.data.cinemas);
        this.cinemas = res.data.cinemas;

        // 数组去重 
        var list = [];
        var obj = {}
        for(var i =0;i<this.cinemas.length;i++){
          if(!obj[this.cinemas[i].districtName]){
            obj[this.cinemas[i].districtName] = this.cinemas[i].districtName;
            list.push(this.cinemas[i].district)
          }
        }

        list.unshift({
          name:"全城",
          districtId:-1,
        })
        this.areas = list;
        
        this.$forceUpdate();
        console.log( this.areas);
      })
    }else{
      // 必须要去选择城市 
      this.$dialog.alert({
        title: '城市选择',
        message: '你尚未选择城市或者城市定位,请去选择',
      }).then(() => {
        // on close
        this.$router.push({name:"city"})
      });
    }
  }
}
</script>

<style lang="scss" >
.cinnav{
  width:100%;
  height:50px;
  display: flex;
  .nav-item{
    flex:1;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size:15px;
   
  }
}

 .active{
   .van-grid-item__content{
           .van-grid-item__text{
        // border:1px solid #ff5f16 !important;
          color:#ff5f16 !important;
      }
   }
}
</style>

